<template>
    <van-tabbar v-model="active" active-color="#333" inactive-color="#bbb">
        <van-tabbar-item to="/index">
            <span>听书</span>
            <img slot="icon" slot-scope="props" :src="props.active ? voice.active : voice.normal"/>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/discover">
            <span>发现</span>
            <img slot="icon" slot-scope="props" :src="props.active ? discover.active : discover.normal"/>
        </van-tabbar-item>
        <!--        <van-tabbar-item icon="setting-o" info="3" to="/note">-->
        <!--            <span>笔记</span>-->
        <!--            <img slot="icon" slot-scope="props" :src="props.active ? note.active : note.normal"/>-->
        <!--        </van-tabbar-item>-->
        <van-tabbar-item icon="setting-o" size="medium" info="" to="/my">
            <span>我的</span>
            <img slot="icon" slot-scope="props" :src="props.active ? my.active : my.normal"/>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
    import Vue from "vue";
    import {
        Tabbar
        , TabbarItem
    } from 'vant';

    Vue.use(Tabbar)
        .use(TabbarItem);

    export default {
        name: "tabbar",
        data() {
            return {
                active: 0,
                voice: {
                    normal: require("./voice.png"),
                    active: require("./voice@selected.png")
                },
                discover: {
                    normal: require("./discover.png"),
                    active: require("./discover@selected.png")
                },
                // note: {
                //     normal: require("./note.png"),
                //     active: require("./note@selected.png")
                // },
                my: {
                    normal: require("./my.png"),
                    active: require("./my@selected.png")
                }
            };
        },
        components: {
            Tabbar,
            TabbarItem
        }
    };
</script>

<style lang="scss" scoped>
    .active_tab img {
        width: 26px;
        height: 26px;
    }

    .active_tab .router-link-active {
        color: #07c160;
    }
</style>